<div id="notifications-timezone">
  <p>All dates are displayed in {{ timezone }} time.</p>
</div>
<div class="row mb-3" *ngIf="notificationTabs.length > 0">
  <div class="col-12">
    <div class="float-end">
      <strong class="d-inline"> Sort By: </strong>
      <div class="btn-group" data-toggle="buttons">
        <button id="sort-end-time" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.NOTIFICATION_END_TIME)" (click)="sortNotificationsBy(SortBy.NOTIFICATION_END_TIME)">End Time</button>
        <button id="sort-start-time" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.NOTIFICATION_START_TIME)" (click)="sortNotificationsBy(SortBy.NOTIFICATION_START_TIME)">Start Time</button>
      </div>
    </div>
  </div>
</div>

<tm-loading-retry [shouldShowRetry]="hasLoadingFailed" [message]="'Failed to load notifications'" (retryEvent)="loadNotifications()">
  <div *tmIsLoading="isLoadingNotifications">
    <div class="alert alert-warning margin-top-30px" role="alert" *ngIf="notificationTabs.length === 0 && !isLoadingNotifications">
      There are no active notifications.
    </div>
  </div>
  <ng-container>
    <div id="notification-tabs">
      <div *ngFor="let notificationTab of notificationTabs">
        <div [id]="notificationTab.notification.notificationId" class="card">
          <div class="card-header cursor-pointer mb-0" [ngClass]="notificationTab.notification.style | notificationStyleClass" (click)="toggleCard(notificationTab)">
            <strong class="text-break">{{notificationTab.notification.title}} [{{notificationTab.startDate}} - {{notificationTab.endDate}}]</strong>
            <div class="card-header-btn-toolbar">
              <tm-panel-chevron [isExpanded]="notificationTab.hasTabExpanded"></tm-panel-chevron>
            </div>
          </div>

          <div class="mb-0" *ngIf="notificationTab.hasTabExpanded" @collapseAnim>
            <div [ngClass]="getBodyTextClass(notificationTab)">
              <div class="notification-message" [innerHtml]="notificationTab.notification.message"></div>
            </div>
            <div class="d-flex flex-row-reverse me-4 mb-3" *ngIf="!notificationTab.isRead">
              <button class="btn-mark-as-read" type="button" [ngClass]="getButtonClass(notificationTab)" (click)="markNotificationAsRead(notificationTab)">
                Mark as Read
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
</tm-loading-retry>
